<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="./js/jquery-1.10.1.js"></script>
		<script>
			
			// 页面加载完渲染前 触发
			jQuery(document).ready(() => {

				// 要执行的代码
				// js的写法：
				// let n = document.getElementsByTagName('a')[0]
				// n.href = 'https://www.baidu.com'
				// n.innerHTML = '百度'
				
				// $("选择器")  a标签中的第一，   attr() 属性相关，   。html() 内容
				$("a:eq(0)")
					.attr('href', 'http://www.baidu.com')
						.html('百度') // 链式代码
						
				// jquery对象：： jquer(选择器)		
				$("div > a").css("font-size", "2em")
				
				// document.create("span")  
				// a.parenet.chilnode
				
				
				$('<span>信息</span>').insertBefore("a") // jquery底层有循环
				
			})
			
			$(() => {
					// alert(1)

					var a1 = [1, 3, 5]
					a1.forEach((n, i) => {
						// $('a').eq(1).after(`<span>下标${i}, 值是：${n} &nbsp;&nbsp;&nbsp;&nbsp;</span>`)
					})
					
					// jQuery对象的方法和jQuery
					$("a").each((i, n) => {
						// this
						// n.html()???  --- n是js对象  n.innerHTML     $(n).html()
						
						// js对象 转换 jQuery  $(dcoument)   $(n)
						$(n).after("<span>"+ i + ":" + $(n).html() + "</span>")
					})
					
					// jquery的方法， 不是jq对象的方法
					$.each(a1, (i, n) => {
						$('a').eq(1).after(`<span><br/>下标${i}, 值是：${n} &nbsp;&nbsp;&nbsp;&nbsp;</span>`)
					})
					
				}
			)
			
			
			
			
		</script>
	</head>
	<body>
	<!-- 	<div>
			<a href="#">hello jquery1</a>
		</div>
		<div>
			<p>
				<a href="#">hello jquery2</a>
			</p>
		</div>
		<style type="text/css">
			/* 空格派生， 父子就行包含关系
				,并列关系
				> 一级子元素
			 */
			div > a {
				color: green
			}
		</style>
		<img src="./img/576f01e33e51fa724fa7b832e0e00c2b.gif" />
		<img src="./img/1940-ipfprtp7236001.jpg" />
		<script>
			
			console.log($("img").size())
			console.log($("img").prop("src"))
			$("img").prop("title", "这时 很牛图片")
			
			
		</script> -->
		
		<hr />
		<div>
				<p>aaa1</p>
				<span>bbbb1</span>
				<p>ccc1</p>
		</div>
		<div>
				<p>aaa2</p>
				<span>bbbb2</span>
				<p>ccc2</p>
		</div>
		<script>
			
			console.info($("p:eq(2)").html())			
			console.info($("p").eq(2).html())
			console.info($("p:nth-of-type(2)"))
			console.info($("p:nth-child(2)"))
			
			$("p").on("click", () => {
				console.info(this)

				alert(event.currentTarget.innerHTML)
				// alert($(this).html());
				
			})
			
			
			$("p").on("click", function() {
				console.info(this)

				alert(event.currentTarget.innerHTML)
				alert($(this).html());
				
			})
			
			function a (fn) {
					fn()
			}
			
			a(() => {

				console.info(this)
			})
				
		</script>
		<input  type="button" class="btn1" value="toggle" />
		<p class="toggle">
			
			sdlkfsldakfjklsdaf
			sdfjsd
		</p>
		<script type="text/javascript">
			$(".btn1").click(function(){
				
				// $(".toggle").hide()
				 $(".toggle").toggle()
			})
			</script>
			<script type="text/javascript">
			$(function(){
				$("select").css({width: '200px'})
			})
		</script>
		
		<select id="s1" multiple="multiple" size=10 >
			<option value="1">aaaaa</option>
			<option value="1">bbbb</option>
			<option value="1">cc</option>
			<option value="1">ddd</option>
			<option value="1">ee</option>
			<option value="1">ff</option>
		</select>
		<button>></button>
		<button>>></button>
		<button><</button>
		<button><<</button>
		<select id="s2" multiple="multiple" size=10>
			
		</select>
		<script>
			$("button:eq(0)").on("click", function() {
				$("#s1 option:selected").appendTo($("#s2"))
			})
			$("button:eq(1)").on("click", function() {
				$("#s1 option").appendTo($("#s2"))
			})
		</script>
	</body>
</html>
